<template>
    <div style="width:100%;height:100%;" id="service_request_con"></div>
</template>

<script>
import echarts from 'echarts';
export default {
    name: 'serviceRequests',
    mounted () {
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            }, 
             legend: {
                data:['Interest','Bonus'],
                orient: 'horizontal', // 'vertical'
                x: 'left', // 'center' | 'left' | {number},
                y: 'top', // 'center' | 'bottom' | {number}
            },
             grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
             toolbox: {  
                        feature: {  
                            saveAsImage: {}  
                        }  
                    },  
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['5.1', '5.8', '5.15', '5.22', '5.29', '6.1', '6.8']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '平台用户总数',
                    type: 'line',
                    stack: '总量',
                    smooth:true,
                    lineStyle:{color:'#2d8cf0'},
                    itemStyle: {
                        normal: {
                            color: '#f0a92d'
                        }
                    },
                    data: [120, 232,301,334, 390, 400, 410]
                },
                {
                    name: '已租房用户',
                    type: 'line',
                    smooth:true,
                    stack: '总量2',
                    lineStyle:{color:'#00FF00'},
                    itemStyle: {
                        normal: {
                            color: '#5896d4'
                        }
                    },
                    data: [97, 158, 178, 234, 290, 330, 310]
                },
            ]
        };
        const serviceRequestCharts = echarts.init(document.getElementById('service_request_con'));
        serviceRequestCharts.setOption(option);

        window.addEventListener('resize', function () {
            serviceRequestCharts.resize();
        });
    }
};
</script>